<template>
	<view class="content">
		<view class="order_one order_tow">
			<view class="flex_sb">
				<view class="order_tow_title flxe_al">
					<image src="https://z1.ax1x.com/2023/09/15/pPWyt2Q.png" mode=""></image>
					社区名称 {{ orderInfo.community_name }}
				</view>
				<u-icon name="arrow-right" color="#BCBBBB" size="28"></u-icon>
			</view>
			<view class="order_tow_address">
				详细地址：{{orderInfo.address}}
			</view>
			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					上门取鞋时间
				</view>
				<view class="order_tow_item_font_color">
					{{orderInfo.door_time}}
				</view>
			</view>
			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					联系人电话
				</view>
				<view class="order_tow_item_font" @click="goPhoneBtn()">
					{{orderInfo.contacts_mobile}}
				</view>
			</view>

			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					联系人
				</view>
				<view class="order_tow_item_font">
					{{orderInfo.contacts}}
				</view>
			</view>


		</view>
		<view class="address-order">

			<view class="order">
				<view class="order-li">
					<image :src="'https://www.sdxiecheng.cn/'+orderInfo.goods_image" mode=""></image>

					<!-- <image :src="'https://www.sdxiecheng.cn/'+orderInfo.goods_image" mode=""></image> -->
					<view class="order-li-right">
						<view class="name">{{orderInfo.goods_title}}</view>
						<view class="des">{{orderInfo.goods_describle}}</view>
						<view class="flex_sb">
							<view class="price">¥{{orderInfo.goods_price}}</view>

							<view class="price_nums">
								X{{orderInfo.goods_num}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="order-info">
			<view class="order-info-li">
				<view>数量：</view>
				<text> X {{ orderInfo.goods_num}}</text>
			</view>
			<view class="order-info-li">
				<view>商品金额：</view>
				<text> ￥ {{ orderInfo.total_fee}}</text>
			</view>
			<view class="order-info-li">
				<view>取送费：</view>
				<text>
					{{orderInfo.delivery_fee}}
				</text>
			</view>
			<view class="order-info-li">
				<view>会员支付：</view>
				<text>
					{{orderInfo.hy_pay}}
				</text>
			</view>
			<view class="order-info-li">
				<view>下单时间：</view>
				<text>{{ orderInfo.createtime }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.paytime">
				<view>支付时间：</view>
				<text>
					{{orderInfo.paytime}}
				</text>
			</view>
			<view class="order-info-li">
				<view>确认时间：</view>
				<text>{{ orderInfo.confirm_time }}</text>
			</view>
			<view class="order-info-li">
				<view>订单编号：</view>
				<text>{{ orderInfo.order_sn }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.taketime">
				<view>取鞋时间：</view>
				<text>{{ orderInfo.taketime }}</text>
			</view>

			<view class="order-info-li">
				<view>备注信息：</view>
				<text>{{ orderInfo.remark }}</text>
			</view>
			<view class="order-info-li shuxiang">
				<!-- <view>附件：</view> -->
				<image style="margin-top: 20rpx;" v-if="orderInfo.enclosure_images"
					@click="previewImage(orderInfo.enclosure_images)" :src="orderInfo.enclosure_images" mode=""></image>
			</view>
		</view>


		<view class="tiaoxingcode">
			<view class="tiaoxingcode-title">打印条码</view>
			<view class="tiaoxingcode-box">
				<input type="text" placeholder="请识别条形码信息" :disabled="type == 'dcx'" v-model="orderInfo.txm_msg" />
				<u-icon @click="scanCode" name="scan" color="#666" size="28"></u-icon>
			</view>
		</view>
		<!-- 取鞋信息 -->
		<view class="qs_xx_box" v-if="type!=='dqx'">
			<h2>
				取鞋信息
			</h2>
			<view class="qs_xx_box_text">
				<view class="">
					鞋子数量(双)：{{orderInfo.take_shoe_num}}
				</view>
				<view class="">
					取鞋时间：{{orderInfo.door_time}}
				</view>
				<view class="qs_xx_box_image">
					
					<image :mode='scaleToFill' v-for="(item,index) in orderInfo.take_shoe_images" @click="previewImage(item)" :src="item" :key='index'></image>
				</view>
			</view>

		</view>
		<!-- 送鞋信息 -->
		<view class="qs_xx_box" v-if=" type!=='dqx' && type !=='xxz' ">
			<h2>
				送鞋信息
			</h2>
			<view class="qs_xx_box_text">
				<view class="">
					鞋子数量(双)：{{orderInfo.delivery_shoe_num}}
				</view>
				<view class="">
					送鞋时间：{{orderInfo.delivery_time}}
				</view>
				<view class="qs_xx_box_image">
					<image mode=""  v-for="(item,index) in orderInfo.delivery_shoe_images" :src="item" @click="previewImage(item)"  :key='index'></image>
				</view>
			</view>
		
		</view>
		<!-- <view v-if="type != 'ywc' && type !='yhdqx'" class="btn-box" style="padding-bottom: 40rpx;">
			<button class="u-reset-button btn3" @click="isOpen">打开柜门</button>
		</view> -->
		<!-- 取鞋照片 -->
		<view class="tiaoxingcode" >
			<view class="tiaoxingcode-title" v-if="type =='dqx'">
				填写取鞋信息
			</view>
			<view class="tiaoxingcode-title" v-if="type =='xxz'">
				填写配送信息
			</view>
			<view class="tiaoxingcode-list" >
				<!-- 取鞋子 -->
				<view class="flxe_al flxe_al1" v-if="type =='dqx'">
					<text class="des">鞋子数量(双)：</text>
					<input type="text" placeholder="请输入鞋子数量" v-model="successnum">
				</view>

				<view v-if="type =='dqx'">
					<u-upload width="140" height="140" max-count="9" upload-text="取鞋凭证" @on-success="success"
						:show-progress="type == 'dqx'" :deletable="type == 'dqx'" @on-remove="remove"
						:file-list="take_shoes_imagesM" :action="action" :custom-btn="true">
						<view slot="addBtn" v-if="type == 'dqx'" class="slot-btn" hover-class="slot-btn__hover"
							hover-stay-time="150">
							<u-icon name="plus" size="40"></u-icon>
							<text>上传图片</text>
						</view>
					</u-upload>
				</view>
				<!-- 配送鞋子 -->
				<view class="flxe_al flxe_al1" v-if="type =='xxz'">
					<text class="des">鞋子数量(双)：</text>
					<input type="text" placeholder="请输入鞋子数量" v-model="successnum_song">
				</view>
				<view v-if="type =='xxz'">
					<u-upload width="140" v-if="type == 'xxz' || type=='xxz'" height="140" max-count="9"
						upload-text="存鞋凭证" :action="action" @on-success="successC" :show-progress="type == 'xxz'"
						:deletable="type == 'xxz'" @on-remove="removeC" :file-list="store_shoes_imagesM"
						:custom-btn="true">
						<view slot="addBtn" v-if="type == 'xxz'" class="slot-btn" hover-class="slot-btn__hover"
							hover-stay-time="150">
							<u-icon name="plus" size="40"></u-icon>
							<text>上传图片</text>
						</view>
					</u-upload>
				</view>


			</view>


		</view>

		<view class="btn-box" v-if="type == 'dqx'">
			<button class="u-reset-button btn3" @click="isPay(0)">确认已取鞋</button>
		</view>

		<view class="btn-box" v-if="type == 'xxz'">
			<button class="u-reset-button btn3" @click="isPay(1)">已完成配送</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				successnum: '', //取认取鞋数量
				successnum_song:'',//送鞋数量
				action: 'https://www.sdxiecheng.cn/index/ajax/upload',
				fileList: [],
				guiziShow: false,
				guiziChengGongShow: false,
				confirmStyle: {
					'borderLeft': '1px solid #EEEEEE'
				},
				type: '',
				id: 0,
				orderInfo: [],
				num: '',
				take_shoes_images: [],
				store_shoes_images: [],
				take_shoes_imagesM: [],
				store_shoes_imagesM: [],
				barCode: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			this.id = e.id
			this.getDcxOrder()
		},
		methods: {
			// 拨打电话
			goPhoneBtn(val) {
				console.log("拨打")
				uni.makePhoneCall({
					// 手机号
					phoneNumber: this.orderInfo.contacts_mobile,
					// 成功回调
					success: (res) => {
						console.log(1111)
					},
					// 失败回调
					fail: (res) => {
						console.log(22222)

					}
				});
			},

			isOpen() {
				this.guiziShow = true
			},
			isPay(type) {
				if(type==0){
					uni.$u.http.post('delivery/take_shoe_ask', {
						id: this.id,
						take_shoe_num: this.successnum,
						take_shoe_images: this.take_shoes_images.join(','),
					}).then(res => {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}).catch(err => {
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				}else{
					uni.$u.http.post('delivery/shoe_delivery_ask', {
						id: this.id,
						delivery_shoe_num: this.successnum_song,
						delivery_shoe_images: this.store_shoes_images.join(','),
					}).then(res => {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}).catch(err => {
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				}
				
				
			},
			success(e) {
				console.log(e)
				this.take_shoes_images.push(e.data.fullurl)
			},
			remove(index, lists, name) {
				this.take_shoes_images.splice(index, 1)
			},
			successC(e) {
				console.log(e)
				this.store_shoes_images.push(e.data.fullurl)
			},
			removeC(index, lists, name) {
				this.store_shoes_images.splice(index, 1)
				console.log(index, lists, name)
			},
			isOpenGuiZi() {
				this.guiziShow = false
				uni.showLoading({
					title: '柜子打开中。。。'
				})
				// let that = this
				if (this.type == 'dqx') {
					this.quxieOpen()
				} else if (this.type == 'dcx') {
					this.cunxieOpen()
				}
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 取鞋打开柜子
			quxieOpen() {
				let that = this
				uni.$u.http.post('/delivery/open_cshoe', {
					order_id: this.id
				}).then(res => {
					that.guiziChengGongShow = true
					that.num = res.data.info
					uni.hideLoading()
					console.log(res)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					})
				})
			},
			// 存鞋打开柜子
			cunxieOpen() {
				let that = this
				uni.$u.http.post('/delivery/open_save', {
					order_id: this.id
				}).then(res => {
					that.guiziChengGongShow = true
					that.num = res.data.info
					uni.hideLoading()
					console.log(res)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					})
				})
			},
			// 待存订单详情
			getDcxOrder() {
				uni.$u.http.post('/delivery/orderon_detail', {
					id: this.id
				}).then(res => {
					console.log(res)
					console.log("获取订单详情")
					switch (res.data.delivery_status) {
						case 0:
							this.type = 'yhdqx'
							break;
						case 1:
							this.type = 'dqx'
							break;
						case 2:
							this.type = 'xxz'
							break;
						case 3:
							this.type = 'dcx'
							break;
						case 4:
							this.type = 'ywc'
							break;
					}

					this.orderInfo = res.data

					if (this.type == 'dcx') {
						this.barCode = res.data.txm_msg
					}
					if (res.data.take_shoes_images) {
						res.data.take_shoes_images.forEach(item => {
							this.take_shoes_imagesM.push({
								url: item
							})
						})

					}
					if (res.data.store_shoes_images) {
						res.data.store_shoes_images.forEach(item => {
							this.store_shoes_imagesM.push({
								url: item
							})
						})

					}

				})
			},
			// 扫描条形码
			scanCode() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.barCode = res.result
					}
				});
			},

		}
	}
</script>

<style lang="less">
	.content {
		padding: 10rpx 20rpx;
	}

	.address-order {
		// background: red;
		background: #FFFFFF;
		border-radius: 10rpx;

		.address {
			padding: 30rpx;
			padding-bottom: 40rpx;
			background: url('http://shoe-orange.laiwang.work/img/address-line.png') bottom no-repeat;
			background-size: 100%;

			.name {
				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 19rpx;
				}

				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 27rpx;
			}

			.address-des {
				color: 24rpx;
				color: #666666;
			}
		}
	}

	// 订单样式
	.order {
		padding: 0 9rpx;
		padding-top: 34rpx;

		.order-li {
			display: flex;
			align-items: center;
			padding-bottom: 35rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.order-li-right {
				width: calc(100% - 150rpx);
				padding-left: 20rpx;

				.name {
					font-size: 30rpx;
				}

				.des {
					font-size: 24rpx;
					margin: 18rpx 0 25rpx;
					// margin-top: 9rpx;
					// margin-bottom: 9rpx;
				}

				.price {
					font-size: 36rpx;
					font-weight: 500;
					color: #FF9A33;
				}
			}

		}
	}

	// 订单信息
	.order-info {
		// min-height: 654rpx;
		background: #FFFFFF;
		// border-radius: 10rpx;
		border-radius: 0 0 10rpx 10rpx;
		border-top: 1px solid #EEEEEE;
		// margin-top: 20rpx;
		padding: 39rpx 21rpx;

		.order-info-li {
			display: flex;
			align-items: center;
			line-height: 60rpx;
			font-size: 30rpx;
		}

		.shuxiang {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.name {
				margin-bottom: 20rpx;
			}

			image {
				width: 209rpx;
				height: 209rpx;
			}
		}
	}

	// 配送信息
	.peisong {
		margin-top: 50rpx;

		.title {
			font-size: 30rpx;
			font-weight: 500;
		}

		.image-list {
			display: flex;
			align-items: center;
		}

		.image-li {
			width: 180rpx;
			margin-right: 30rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 18rpx;
			}

			text {
				font-size: 28rpx;
				color: #7C7C7C;
				text-align: center;
			}
		}
	}

	.btn-box {
		padding-bottom: 98rpx;

		.btn3 {
			width: 650rpx;
			height: 80rpx;
			background: #FBAA27;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 94rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	// 底部按钮
	.order-bottom-box {
		width: 100%;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		padding: 0 30rpx;

		.order-bottom-info {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 36rpx;
				font-weight: 500;

				text {
					color: #FF9A33;
				}
			}

			button {
				margin: 0;
				width: 200rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FF9A33;
			}
		}
	}

	// 售后
	.shouhou-li {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 60rpx;

		textarea {
			width: 100%;
			height: 200rpx;
			border: 2rpx solid #F2F2F2;
			padding: 20rpx;
			font-weight: normal;
			margin-top: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			line-height: normal;
		}
	}

	// 条形码信息
	.tiaoxingcode {
		width: 100%;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 39rpx 21rpx;

		.tiaoxingcode-title {
			font-size: 30rpx;

			text {
				color: #646464;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}

		.tiaoxingcode-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			input {
				width: 80%;
			}
		}

		.tiaoxingcode-list {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;

			.des {
				// margin-bottom: 10rpx;
			}
		}
	}

	.slot-btn {
		width: 140rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;

		text {
			margin-top: 10rpx;
		}
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.order_one {
		border-radius: 10rpx;
		padding: 30rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.order_tow_title>image,
	.order_tow_item_font>image {
		width: 24rpx;
		height: 30rpx;
		margin-right: 19rpx;
	}

	.order_tow_title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.order_tow_address {
		margin: 25rpx 0 0;
		padding-bottom: 25rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		border-bottom: 1rpx solid #F2F6FC;
	}

	.order_tow_item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F2F6FC;
		// border-bottom: 1px solid red;

	}

	.order_tow_item_font {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;

	}

	.order_tow_item_font_color {
		font-size: 30rpx;
		font-weight: 400;
		color: #FBAA27;
	}

	.order_right input {
		text-align: right;
	}

	.price_nums {
		font-size: 24rpx;
		font-weight: 400;
		color: #7C7C7C;
	}

	.flxe_al1 {
		margin: 15rpx 0 71rpx;
	}

	.qs_xx_box {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 35rpx 35rpx 40rpx;
	}

	.qs_xx_box>h2 {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}

	.qs_xx_box_text>view {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 60rpx;
	}

	.qs_xx_box_image {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30rpx;
		margin-top: 30rpx;
	}

	.qs_xx_box_image>image {
		width: 180rpx;
		height: 180rpx;
	}
</style>